<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/normalize.css" />
    <title>联系我们</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .header {
        width: 100%;
        position: absolute;
        z-index: 999;
      }
      .header_logo {
        text-align: center;
        padding: 26px 0 16px;
      }
      .header_logo img {
        width: 160px;
        height: 26px;
      }
      .header_list {
        display: flex;
        justify-content: center;
      }
      .header_list a {
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        display: inline-block;
        padding: 0 20px;
      }
      .header_list a:hover {
        text-decoration: underline;
      }
      .main_banner {
        position: relative;
      }
      .main_banner img {
        width: 100%;
      }
      .main_banner div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 36px;
      }
      .main_item_btn {
        width: 120px;
        line-height: 30px;
        background: #1b1b1b;
        color: #fff !important;
        cursor: pointer;
        text-align: center;
        font-size: 12px;
        margin-top: 30px;
      }
      .main_item_btn:hover {
        opacity: 0.75;
      }

      .main_text {
        width: 1080px;
        margin: 20px auto 50px auto;
        overflow: hidden;
      }

      .main_text_l {
        width: 65%;
        float: left;
      }
      .main_text_l_item {
        border-bottom: solid 1px #666;
        padding: 30px 0;
      }

      .main_text_l_item li {
        font-size: 13px;
        margin-bottom: 20px;
        color: #666;
      }
      .main_text_r {
        width: 35%;
        float: left;
        padding-left: 50px;
        font-size: 12px;
      }
      .main_text_r img {
        width: 180px;
      }
      .main_text h4 {
        cursor: pointer;
      }
      .main_text h4:hover {
        opacity: 0.5;
      }
      .footer {
        background: #1b1b1b;
        line-height: 100px;
        text-align: center;
        color: #fff;
        font-size: 12px;
      }
    </style>
  </head>

  <body>
    <!-- 页面头部导航栏 -->
    <header class="header">
      <div class="header_logo">
        <img src="./images/gucci-logo@2x.png" alt="" />
      </div>
      <div class="header_list">
        <a href="./index.html">首页</a>
        <a href="./introduce.html">古驰故事</a>
        <a href="./contact.html">联系我们</a>
      </div>
    </header>
    <!-- 页面主体 -->
    <main class="main">
      <div class="main_banner">
        <img src="./images/contact.jpg" alt="" srcset="" />
        <div>联系我们</div>
      </div>
      <div class="main_text">
        <div class="main_text_l">
          <div class="main_text_l_item">
            <div>在线顾问</div>
            <ul>
              <li>我们的在线客服从平日9:00 - 22:00，节假日9:00 - 18:00（春节假期除外）提供咨询服务。</li>
            </ul>
            <div class="main_item_btn">在线顾问</div>
          </div>
          <div class="main_text_l_item">
            <div>客服咨询热线</div>
            <ul>
              <li>我们的热线客服从平日9:00 - 22:00， 节假日9:00 - 18:00（春节假期除外）为您提供在线购物，线下门店及商品资讯，及售后相关的咨询服务。</li>
              <li>来电400 8210 582</li>
            </ul>
            <div class="main_item_btn">预约服务</div>
          </div>
          <div class="main_text_l_item">
            <div>尊享门店预约服务</div>
            <ul>
              <li>您可通过点击下方“预约门店服务”，前往门店咨询产品相关信息，获取专业的搭配意见，同时还可帮助您挑选合适的礼品。</li>
            </ul>
            <div class="main_item_btn">门店服务</div>
          </div>

          <div class="main_text_l_item">
            <div>客户服务电子邮件</div>
            <ul>
              <li>您可点击“给我们发送电子邮件”，留下您的相关信息及您遇到的购物问题，我们的客服专员将为您提供所需帮助。</li>
            </ul>
            <div class="main_item_btn">发送邮件</div>
          </div>
        </div>
        <div class="main_text_r">
          <div>关注微信</div>
          <div>
            <p>邀请您加入官方服务号微信！</p>
            <p>微信搜索 gucciofficial，</p>
            <p>了解线上选购与最新资讯。</p>
          </div>
          <img src="./images/code_pc.jpg" alt="" />
        </div>
      </div>
      <div class="main_text">
        <h4>有关GUCCI(古驰)中国官网咨询 - 香港特别行政区和澳门特别行政区</h4>
        <hr />
        <h4>有关GUCCI(古驰)中国官网咨询 - 台湾地区</h4>
      </div>
    </main>
    <!-- 页脚 -->
    <footer class="footer">版权@gucc官网 - by 小可爱</footer>
  </body>
</html>
